<template>
  <Modal :value="modal.show" cancelTextual="取消" lock-scroll okText="导出"
         @on-cancel="close" @on-ok="handleConfirm">
    <div class="modalExport">
      <div class="flex-center">
        <span class="label">{{ label }}：</span>
        <Input v-model="modal.templateName"></Input>
      </div>
    </div>
    <div slot="footer" class="flex-start-end">
      <Button type="plain" @click="close">取消</Button>
      <Button type="primary" @click="handleConfirm">导出</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  name: "ModalExport",
  props: {
    errorTips: {
      type: String,
      default: '请输入'
    },
    label: {
      type: String,
      default: '名字'
    }
  },
  data() {
    return {
      modal: {
        show: false,
        templateName: ''
      }
    }
  },
  methods: {
    handleConfirm() {
      const templateName = this.modal.templateName
      if (templateName) {
        this.$emit('handleConfirm', templateName)
        this.modal.show = false
        return;
      }
      this.$Message.error(this.errorTips)


    },
    open() {
      this.modal.templateName = ''
      this.modal.show = true
    },
    close() {
      this.modal.templateName = ''
      this.modal.show = false
    }

  }
}
</script>
<style lang="scss" scoped>
.modalExport {
  padding-top: 24px;

  .label {
    white-space: nowrap;
  }
}
</style>
